<template>
  <div class="index">
    <!-- 头部 -->
    <div class="my_header">
      <div class="top1">职场官-<span class="top2">职场征信系统</span></div>
    </div>
    <!-- banner部分 -->
    <div class="banner">
      <img src="static/icon_pc/icon/login_banner.png" alt="">
    </div>
    <!-- 黑名单统计数量 -->
    <div class="box">
      <div class="black_num">
        <div class="num">
          <span v-text="total_lost"></span>
          <div>昨日新增黑名单</div>
        </div>
        <div class="num">
          <span v-text="total_record"></span>
          <div>昨日搜索次数</div>
        </div>
      </div>
    </div>
    <!-- 搜索部分 -->
    <div class="search">
      <div class="serbox">
        <input class="ser_input" v-model="keyword" type="text" placeholder="请输入姓名或身份证号或手机号"/>
        <button class="ser_btn mui-icon mui-icon-search" @click="search">查询</button>
      </div>
    </div>
    <!-- 消息 -->
    <div class="info">
      <div class="infor">
        <img src="static/icon_pc/icon/index_notice.png"> <span>{{new_record.user_name.length>5?new_record.user_name.slice(0,5)+'...':new_record.user_name}} </span>
        查询了 <span>({{new_record.keyword}})</span>
      </div>
    </div>
    <!--最新上传-->
    <div class="newstitle" style="margin-top: -0.15rem"><span>最新上传</span><!--<span class="upload-btn" @click="upload()"><img
      src="static/icon_pc/icon/upload.png" style="width: .8rem">我要上传</span>--></div>
    <div class="slide clearfix">
      <van-swipe :width="174" :loop="false" :show-indicators="false">
        <!--<div class=" newupload clearfix">-->
        <van-swipe-item v-for="(item,index) in lost_list" :key="index">
          <div class="item" :style="'background:url('+item.image+')no-repeat'">
            <!--<img :src="item.image" alt="">-->
              <div class="headdiv">
                <img class="headpic" :src="item.head_img">
                <div class="title">{{hidden(item.user_name, 2, 4)}}</div>
                <div class="subtitle" style="text-align: center">上传了{{item.name}}</div>
              </div>
              <div class="bottomdiv">
                <div class="content-1 upload-content" style="-webkit-box-orient: vertical;">
                  {{item.content}}
                </div>
                <div class="address"><img src="static/icon_pc/icon/icon_adress.png">{{item.province}}/{{item.city}}
                </div>
              </div>
            </div>
          </van-swipe-item>
        <!--</div>-->
      </van-swipe>
    </div>

  </div>
</template>

<script>
  // let Base64 = require('js-base64').Base64;
  import {Base64} from 'js-base64';

  export default {
    data() {
      return {
        //查询动态
        total_lost: "",
        total_record: "",
        banner: "",
        keyword: "",
        new_record: {
          user_name: "",
          name: "",
          mobile: ""
        },
        error: '',
        lost_type: [],
        lost_list: [],
        isDisplay: true, //是否显示底部导航
        tab: 1,
        docmHeight: document.documentElement.clientHeight, //默认屏幕高度
        showHeight: document.documentElement.clientHeight //实时屏幕高度

      };
    },
    watch: {},
    created() {
      // alert('执行方法')
      if (localStorage.token) {
        // alert('token');
        console.log('有token');
        let loadNotify = this.$toast.loading({
          mask: true,
          message: '加载中...',
          duration: 5000,
        });
        this.$http.get('api/User/index').then(response => {
          if (response.code == 200) {
            // alert('token有效');

          } else {
            // alert('token失效');
            localStorage.removeItem("token");
            let a = location.href;
            if (a.indexOf('invite_code') !== -1) {
              let invite_code = this.getQueryString(a, 'invite_code');
              // alert('有邀请码'+invite_code);
              location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxc1016fb26f10cbf0&redirect_uri=http://www.hrgsxt.cn/wx/index.html&response_type=code&scope=snsapi_userinfo&state=' + invite_code + '#wechat_redirect';
            } else {
              // alert('没有有邀请码');
              location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxc1016fb26f10cbf0&redirect_uri=http://www.hrgsxt.cn/wx/index.html&response_type=code&scope=snsapi_userinfo&state=0#wechat_redirect';
            }
          }
          loadNotify.clear();
        }).catch(error => {
          // alert('检验token失败');
          console.log('token失效');
          localStorage.removeItem("token");
          if (a.indexOf('invite_code') !== -1) {
            let invite_code = this.getQueryString(a, 'invite_code');
            // alert('有邀请码'+invite_code);
            location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxc1016fb26f10cbf0&redirect_uri=http://www.hrgsxt.cn/wx/index.html&response_type=code&scope=snsapi_userinfo&state=' + invite_code + '#wechat_redirect';
          } else {
            // alert('没有有邀请码');
            location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxc1016fb26f10cbf0&redirect_uri=http://www.hrgsxt.cn/wx/index.html&response_type=code&scope=snsapi_userinfo&state=0#wechat_redirect';
          }
          loadNotify.clear();
        })
      } else {
        // alert('执行else方法')

        let a = location.href;
        if (a.indexOf('invite_code') !== -1) {    //从邀请码进来的
          // alert('从邀请码进来');
          console.log('从邀请码进来');
          let invite_code = this.getQueryString(a, 'invite_code');
          location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxc1016fb26f10cbf0&redirect_uri=http://www.hrgsxt.cn/wx/index.html&response_type=code&scope=snsapi_userinfo&state=' + invite_code + '#wechat_redirect';
        } else if (a.indexOf('?code') !== -1) {    //从微信跳转进来
          // alert('从微信进来');
          let loadNotify = this.$toast.loading({
            mask: true,
            message: '加载中...',
            duration: 5000,
          });
          var that = this;
          let inviteCode = this.getQueryString(a, 'state');
          let inviteCodeSub = inviteCode.indexOf('#');
          let code = this.getQueryString(a, 'code');
          // alert(code);
          this.$http.get('api/Weixin/getUserOpenId', {
            code: code,
            invite_code: inviteCode.substr(0, inviteCodeSub)
          }).then(response => {
            loadNotify.clear();
            // that.$store.commit('setCodeInvalid', true);
            if (response.code == 200) {
              // alert('得到token，跳转首页');
              localStorage.setItem("token", response.data);
              location.href = 'http://www.hrgsxt.cn/wx/index.html';
              // that.$store.commit('setIsBindPhone', true);
            } else if (response.code == 403) {
              // alert('需要绑定手机号');
              that.$store.commit('setIsBindPhone', false);
              that.$store.commit('setBindPhoneParams', response.data);
              localStorage.setItem("setBindPhoneParams", JSON.stringify(response.data));
            } else {

            }
          }).catch(error => {

          });

        } else {
          // alert('没token,没邀请码');
          location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxc1016fb26f10cbf0&redirect_uri=http://www.hrgsxt.cn/wx/index.html&response_type=code&scope=snsapi_userinfo&state=0#wechat_redirect';
        }

      }
      this.init();
      setInterval(() => {
        this.init();
      }, 30000);
    },
    methods: {
      init() {    //获取首页信息
        this.$http.get('api/Index/index').then(response => {
          this.new_record = response.data.new_record;
          let keyword = response.data.new_record ? response.data.new_record.keyword : '';
          if (keyword) {
            switch (keyword.length) {
              case 1:
                this.new_record.keyword = '*';
                break
              case 2:
              case 3:
                this.new_record.keyword = this.hidden(keyword, 1, 0);
                break
              case 4:
              case 5:
                this.new_record.keyword = this.hidden(keyword, 1, 1);
                break
              case 6:
              case 7:
              case 8:
                this.new_record.keyword = this.hidden(keyword, 2, 2);
                break
              default:
                this.new_record.keyword = this.hidden(keyword, 3, 3);
            }
          }

          this.lost_list = response.data.lost_list;

          this.total_lost = response.data.total_lost;
          this.total_record = response.data.total_record;
          this.banner = response.data.banner;
        });
      },
      hidden(str, frontLen, endLen) {    //指定位置用*显示
        let len = str.length - frontLen - endLen;
        let xing = '';
        for (let i = 0; i < len; i++) {
          xing += '*';
        }
        return str.substring(0, frontLen) + xing + str.substring(str.length - endLen);
      },
      userJudgment() {   //用户token以及是否绑定手机号的判断
        if (this.$store.state.isBindPhone) {
          return true
        } else {
          this.$router.push('/bindphone');
        }
        return false;
      },
      getQueryString(url, ref) {  //获取地址栏参数
        var str = url.substr(url.indexOf('?') + 1);
        if (str.indexOf('&') != -1) {
          var arr = str.split('&');
          for (let item of arr) {
            if (item.split('=')[0] == ref) return item.split('=')[1];
          }
        } else {
          return url.substr(url.indexOf('=') + 1)
        }
      },
      upload() {   //我要上传
        console.log('upload')
        console.log(this.$store.state.isBindPhone)
        if (this.userJudgment()) {
          if (this.$store.state.userType == '1') {
            this.$router.push({
              path: "./Enterprise",
              query: {
                fromHomePage: true,
              }
            });
          } else {
            this.$router.push('/blackname')
          }
        }
      },
      search() {    //点击查询按钮
        console.log(this.$store.state.isBindPhone)
        if (this.userJudgment()) {
          if (!this.keyword) {
            this.$toast("请输入关键词");
          } else {
            this.$http.get('api/Welcome/user').then(response => {
              console.log('>>>>>>+++++', response, response.data.inquiry != 0);
              if (response.data.inquiry != 0) {
                this.$router.push({
                  path: "./searchlist",
                  query: {
                    keyword: this.keyword,
                    type: 0
                  }
                });
              } else {
                this.$toast({
                  message: "查询次数不足，请购买套餐",
                  duration: 1000
                });
                this.$router.push({
                  path: "./nulls",
                  query: {
                    tabitem: "paied",

                  }
                });
              }
            })
          }
        }
      }
    }
  };
</script>

<style scoped>
  html {
    background-color: #f8f8f8;
  }

  .slide {
    width: 100%;
    /* height: 52.26%; */
    background-color: #ffffff;
  }

  .slide .item .headdiv {
    height: 2.47rem;
    width: 100%;
  }

  .newupload {
    float: left
  }

  .upload-btn {
    float: right;
    margin-right: 0.2rem
  }

  .slide .item .headdiv .headpic {
    width: 1rem;
    height: 1rem;
    margin: 0.3rem 1.3rem 0.2rem;
  }

  .slide .item .headdiv .title {
    width: 100%;
    text-align: center;
    color: #333333;
    font-size: 0.28rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0px auto 0.18rem;
  }

  .slide .item .headdiv .subtitle {
    width: 100%;
    text-align: center;
    color: #999999;
    font-size: 0.22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .slide .item .bottomdiv {
    height: 1.42rem;
    width: 100%;
    background-color: #f8f8f8;
    padding-top: 0.2rem;
  }

  .slide .item .bottomdiv .content-1 {
    color: #666666;
    width: 100%;
    font-size: 0.16rem;
    text-indent: 2em;
    line-height: 18px;
  }

  .upload-content {
    word-break: break-all;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    /* autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
  }

  .slide .item .bottomdiv .address {
    color: #999999;
    font-size: 0.18rem;
    margin: 5px 0px 0px 10px;
  }

  .slide .item .bottomdiv .address img {
    width: 0.2rem;
    height: 0.24rem;
    vertical-align: middle;
    margin-right: 5px;
  }

  .slide .item {
    width: 3.35rem;
    height: 3.92rem;
    border: 1px solid #e2e2e2;
    margin: 0.3rem 0px 0.4rem 0.3rem;
  }

  .newstitle {
    clear: both;
    background-color: #ffffff;
    width: 100%;
    height: 0.88rem;
    line-height: 0.88rem;
    color: #333333;
    font-size: 0.32rem;
    padding-left: 0.3rem;
    border-bottom: 1px solid #efefef;
  }

  /* 头部 */

  .index {
    /* width: 750px; */
    /* position: relative;*/
    padding-top: 0.88rem;
    height: 100%;
    margin-bottom: 1rem;
    /* padding-bottom: 1rem; */
  }

  .my_header {
    height: 0.88rem;
    background: rgba(0, 133, 240, 1);
    text-align: center;
    color: #fff;
    line-height: 0.88rem;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 999;
  }

  .top1 {
    height: 0.32rem;
    font-size: 0.34rem;
    font-family: PingFang-SC-Bold;
    font-weight: bold;
    color: rgba(255, 255, 255, 1);
  }

  .top2 {
    font-size: 0.26rem;
    font-weight: 400;
  }

  /* 头部结束 */
  /* banner部分 */

  .banner {
    width: 100%;
    height: 2.1rem;
  }

  .banner img {
    width: 100%;
    height: 2.1rem;
  }

  /* banner结束 */
  /* 黑名单数量开始 */

  .box {
    width: 6rem;
    height: 1.2rem;
    background: rgba(255, 255, 255, 1);
    position: absolute;
    left: 50%;
    margin-left: -3rem;
    margin-top: -0.65rem;
    border-radius: 0.06rem;
    box-sizing: border-box;
  }

  .black_num {
    height: 1.2rem;
    display: flex;
    justify-content: space-around;
    text-align: center;
    width: 6rem;
  }

  .serbox {
    background-color: #ffffff;
    width: 100%;
    height: 1.24rem;
    line-height: 1.24rem;
  }

  .black_num .num {
    padding: 0.2rem 0;
    line-height: 0.32rem;
    box-sizing: border-box;
  }

  .black_num .num span {
    color: #ff7e00;
    font-weight: bold;
    font-size: 0.32rem;
  }

  .black_num .num div {
    color: #666666;
    font-weight: medium;
    font-size: 0.2rem;
    margin-top: 0.09rem;
  }

  /* 黑名单数量结束 */
  /* 搜索查询开始 */

  .search {
    margin-top: 8%;
    width: 100%;
    line-height: 1.24rem;
    text-align: center;
    font-size: 0rem;
  }

  .search .ser_input {
    width: 73.333%;
    height: 0.9rem;
    line-height: 0.64rem;
    color: #999;
    font-size: 0.24rem;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(226, 226, 226, 1);
    margin-top: 15px;
  }

  .search .ser_btn {
    display: inline-block;
    width: 1.4rem;
    height: 0.9rem;
    color: #fff;
    font-size: 0.26rem;
    background: rgba(0, 133, 240, 1);
    border-radius: 0px 6px 6px 0px;
    margin-left: -.04rem
  }

  .infor img {
    width: 0.37rem;
    height: 0.32rem;
    vertical-align: middle;
    margin-bottom: 3px;
    margin-right: 3px;
  }

  /* 搜索查询结束 */
  /* 消息 */

  .info {
    height: 0.88rem;
    line-height: 0.88rem;
    padding: 0 0.3rem;
    background: rgba(255, 255, 255, 1);
    /* margin-top: 8px; */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .infor {
    color: #999;
    font-size: 0.28rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .infor i {
    width: 0.37rem;
    height: 0.32rem;
    color: #0085f0;
  }

  .infor span {
    width: 4.08rem;
    height: 0.28rem;
    font-size: 0.28rem;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: #333;
  }

</style>
